<!--设备选择器 可以选择变电站、线路、变压器等各种设备 -->
<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:sdu="http://sduept.com/jsf/cc">
<h:head>
	<title>设备选择器</title>
	<style type="text/css">
.value {
	font-weight: bold;
}

.ui-tree {
	width: 400px;
	position: relative;
	height: 300px;
	overflow-y: scroll;
}

input[type="text"] {
	height: 21px;
}
</style>
</h:head>
<!-- 
	layer.js打开的窗口中用到设备选择器时，选择本页面。
	需要在父xhtml中添加primeface代码：
	<p:commandButton value="添加主保护" onclick="openNeedDeviceDialog('zbhdz','#{acLineFaultReportController.faultReportMain.faultRecord.equipment_id}','#{acLineFaultReportController.secondStationDetail.stationId}');" icon="ui-icon-document"/>
	<p:remoteCommand name="onDeviceDialogReturn" actionListener="#{acLineFaultReportController.onDeviceDialogReturn}"/>
	需要在父xhtml中添加script代码：
	var equipmentSelectorIndex;
	//此方法与上面添加主保护时的方法名和参数一致即可
	function openEquipmentSelectorDialog(stationId){
		var params = "stationId="+ stationId;
		//打开页面
		equipmentSelectorIndex = layer.open({
			  type: 2,
			  maxmin :false,
			  area: ['610px', '462px'],
			  fixed: false, //不固定
			  title:'设备选择器',
			  maxmin: true,
			  content: '/ui/common/equipment_selector_single_layer.xhtml?'+params
			});
	}
	//此方法名不可更改
	function dialogReturn(index,data){
		var params = [];
		data = eval("("+data+")");
		if(index == equipmentSelectorIndex){
			params.push({name:'className',value:data.className},{name:'data',value:data.data},{name:'type',value:data.type});
			onDeviceDialogReturn(params);
		}
	}
	需要在打开此选择器的页面的controller中添加如下方法：
	//此方法与primeface中调用的方法名一致即可
	public void onDeviceDialogReturn() {
		String data = getParameter("data");
		String className = getParameter("className");
	//	type为打开页面时传递的type，不同type对应不同的类型的data数据
		if(ProtectionEquipment.class.getSimpleName().equals(className)){
			ProtectionEquipment pe = JSONObject.parseObject(data, ProtectionEquipment.class);
			//业务逻辑
		}else if(ProtectionEquipment.class.getSimpleName().equals(className)){
			ProtectionEquipment pe = JSONObject.parseObject(data, ProtectionEquipment.class);
			//业务逻辑
		}else if(Breaker.class.getSimpleName().equals(className)){
			Breaker b = JSONObject.parseObject(data, Breaker.class);
			//业务逻辑
		}else{
			return;
		}
		//更新前台表格，不知为何这里从前台无法直接更新表格
		RequestContext.getCurrentInstance().update(Arrays.asList("form1:stations:fdt","form1:stations:fbdt","form1:stations:sdt","form1:stations:sbdt"));
	}
	} -->
<h:body>
	<h:form id="toolbarForm">
		<p:toolbar id="toolbar">
			<f:facet name="left">
				<h:selectOneMenu rendered="#{equipmentSingleSelectorLayerController.stationId == null}" value="#{equipmentSingleSelectorLayerController.chooseVoltage}" style="height:31px;">
					<p:ajax event="change" listener="#{equipmentSingleSelectorLayerController.changeVoltage}"
						update="deviceForm:tree" />
					<f:selectItem itemLabel="全部" itemValue="0" />
					<f:selectItem itemLabel="220kV" itemValue="220" />
					<f:selectItem itemLabel="500kV及以上" itemValue="500" />
					<f:selectItem itemLabel="800kV及以上" itemValue="800" />
				</h:selectOneMenu>
				<p:autoComplete rendered="#{equipmentSingleSelectorLayerController.stationId == null}" placeholder="输入拼音首字母可查询" value="#{equipmentSingleSelectorLayerController.filter}"
					dropdown="true" completeMethod="#{equipmentSingleSelectorLayerController.completeEquipments}"
					scrollHeight="300" style="margin-left:10px;height:31px;">
					<p:ajax update="deviceForm:tree" event="itemSelect"
						listener="#{equipmentSingleSelectorLayerController.autoCompleteEquipment}" />
				</p:autoComplete>
				<!-- <p:commandButton style="margin-left: 3px;" icon="ui-icon-search" /> -->
				<p:commandButton rendered="#{equipmentSingleSelectorLayerController.stationId == null}" icon="fa fa-refresh" update="deviceForm:tree toolbar" title="清除"
					actionListener="#{equipmentSingleSelectorLayerController.refresh}" style="margin-left:5px;" />
			</f:facet>
			<f:facet name="right">
				<p:commandButton value="确定" style="margin-right: 50px;"
					update="selectedEquipmentJson" oncomplete="closeAndSave();"
					disabled="#{!equipmentSingleSelectorLayerController.showChooseBtn()}"
					actionListener="#{equipmentSingleSelectorLayerController.selectSingleDialog}" />
				<h:inputHidden id="selectedEquipmentJson" value="#{equipmentSingleSelectorLayerController.selectedEquipmentJson}" />
			</f:facet>
		</p:toolbar>
	</h:form>
	<h:form id="deviceForm">
		<p:messages id="messages" showDetail="true">
		</p:messages>
		<p:tree value="#{equipmentSingleSelectorLayerController.root}" var="node"
			style="width:600px;border:none" dynamic="true" id="tree" widgetVar="tree" animate="true"
			selectionMode="single" selection="#{equipmentSingleSelectorLayerController.selectedNode}">
			<p:ajax event="expand" update="deviceForm:tree"
				listener="#{equipmentSingleSelectorLayerController.onNodeExpand}" />
			<p:ajax event="select" update="toolbarForm:toolbar"
				listener="#{equipmentSingleSelectorLayerController.onNodeSelect}" />
			<p:treeNode type="1" icon="fa fa-folder-open-o">
				<h:outputText value="#{node}" />
			</p:treeNode>
			<p:treeNode type="Substation" icon="fa fa-home ">
				<h:outputText value="#{node}" />
			</p:treeNode>
			<p:treeNode type="Equipment" icon="fa fa-cc-amex">
				<h:outputText value="#{node}" />
			</p:treeNode>
		</p:tree>
	</h:form>
	<script>
		function closeAndSave(){
			var index = parent.layer.getFrameIndex(window.name);
			var jsonData = document.getElementById("toolbarForm:selectedEquipmentJson").value;
			if(parent.dialogReturn){
				parent.dialogReturn(index,jsonData);
			}
			parent.layer.close(index);
		}
	</script>
</h:body>
</html>
